<template>
	<view :class="['page',{'iphoneX':isIphoneX}]">
		<template v-if="token&&isLogin">
			<view class="search-data">
				<view class="fix-wrap">
					<view class="select-bar">
						<navigator
							:url="'/package_common/search_tool/search_tool?dev_type='+dev_type+'&typeid='+select_dev.typeid"
							hover-class="none" class="change-btn">
							<view class="select-data">{{select_dev.name}}</view>
							<view class="iconfont f-s24">&#xe623;</view>
						</navigator>
					</view>
					<view class="date-bar">
						<view class="date start-date" @click="changeDate(1)">
							<input type="text" v-model="params.startDate" placeholder="选择开始时间" disabled="true"
								class="inp">
						</view>
						<view class="date end-date" @click="changeDate(2)">
							<input type="text" v-model="params.overDate" placeholder="选择结束时间" disabled="true"
								class="inp">
						</view>
						<view class="btn" @click="search">查询</view>
					</view>
				</view>
			</view>

			<view class="body">
				<template v-if="loadingState.default">
					<loading :loadingState="loadingState"></loading>
				</template>

				<template v-else>
					<view class="list-wrap">
						<template v-if="list.length>0">
							<view class="item" v-for="(item,index) in list" :key="index">
								<view class="info">
									<view class="time">采集时间：{{item.create_time}}</view>
									<view class="pest-count">
										累计虫数：{{item.count}}
									</view>
									<!-- <view class="pest-count">工作状态：{{item.ws==0?'待机':'正常'}}</view> -->
								</view>
								<view class="btn" @click="showDetail(item)">详情</view>
							</view>
							<loading :loadingState="loadingState"></loading>
						</template>
						<empty v-else msg="暂无数据"></empty>
					</view>
				</template>
			</view>

		</template>

		<!-- 弹窗 -->
		<view v-if="flag.isFullPage" class="full-fix-page a-fadein">
			<!-- 日期 -->
			<laydate v-if="flag.isSeleceDate" :type="params.date_type" @selectDate="selectDate" @closeDate="closeDate"
				@clearDate="clearDate"></laydate>

			<view v-if="flag.isShowDetail" class="popup-wrap ">
				<view class="popup-type-tips">
					<view class="close-btn iconfont f-s54" @click="showPopup('hide')">&#xe65b;</view>
					<view class="content" style="height: 900rpx;overflow-y: auto;">
						<view class="data-wrap">
							<template v-if="detailLoading.loading">
								<loading :loadingState="detailLoading"></loading>
							</template>
							<template v-else>
								<view class="item">
									<view class="label">设备编号：</view>
									<view class="con">{{detail.device_number}}</view>
								</view>
								<view class="item">
									<view class="label">采集时间：</view>
									<view class="con">{{detail.create_time}}</view>
								</view>
								<view class="item">
									<view class="label">电池电压：</view>
									<view class="con">{{detail.battery_voltage||0}}V</view>
								</view>
								<view class="item">
									<view class="label">太阳能板电压：</view>
									<view class="con">{{detail.solar_panel_v||0}}V</view>
								</view>
								<view class="item">
									<view class="label">累计虫数：</view>
									<view class="con">{{detail.count}}</view>
								</view>
								<view class="item">
									<view class="label">开灯状态：</view>
									<view class="con">{{detail.light_status==1?'开灯':'关灯'}}</view>
								</view>
								<view class="item">
									<view class="label">天亮状态：</view>
									<view class="con">{{detail.daybreak_status==1?'天亮':'天黑'}}</view>
								</view>
								<view class="item">
									<view class="label">下雨状态：</view>
									<view class="con">{{detail.rain_status==1?'下雨':'正常'}}</view>
								</view>
								<view class="item">
									<view class="label">定时时间：</view>
									<view class="con">{{detail.timing_time||0}}小时</view>
								</view>
								<view class="item">
									<view class="label">设备温度(℃)：</view>
									<view class="con">{{detail.device_temperature}}</view>
								</view>
								<view class="item">
									<view class="label">电池类型：</view>
									<view class="con">
										{{detail.battery_type==1?'铅酸':detail.battery_type==2?'三串锂电池':detail.battery_type==3?'4串磷酸锂铁':'类型为空'}}
									</view>
								</view>
								<view class="item">
									<view class="label">当天虫数：</view>
									<view class="con">{{detail.current_date_count}}</view>
								</view>
								<view class="item">
									<view class="label">电池状态：</view>
									<view class="con">{{detail.battery_status}}</view>
								</view>
								<view class="item">
									<view class="label">信号强度：</view>
									<view class="con">{{detail.signal_intensity}}</view>
								</view>
								<view class="item">
									<view class="label">倾倒状态：</view>
									<view class="con">{{detail.dumping_status==1?'倾倒':'正常'}}</view>
								</view>
								<view class="item">
									<view class="label">设备地址：</view>
									<view class="con">{{detail.device_address}}</view>
								</view>
								<view class="item">
									<view class="label">保护温度(℃)：</view>
									<view class="con">{{detail.protect_temperature}}</view>
								</view>
								<!-- 	<template v-else>
									<empty msg="数据不详" :isIcon="false"></empty>
								</template> -->
							</template>
						</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import loading from '@/components/loading-more.vue'
	import laydate from '@/components/laydate.vue'
	import empty from '@/components/empty.vue'
	export default {
		name: '',
		data() {
			return {
				isIphoneX: getApp().globalData.isIphoneX,
				appid: getApp().globalData.appid,
				token: uni.getStorageSync('token'),
				isLogin: false,
				userInfo: uni.getStorageSync('userInfo'),
				loginStateUpdate: false,
				dev_type: '',
				loadingState: {
					default: true,
					loading: false,
					completed: false
				},
				detailLoading: {
					loading: true
				},
				flag: {
					isFullPage: false,
					isSeleceDate: false,
					isShowDetail: false
				},
				params: {
					page: 1,
					limit: 20,
					order: 'desc',
					startDate: '',
					overDate: '',
					date_type: ''
				},
				select_dev: {
					id: '',
					name: '',
					typeid: '',
					update: false
				},
				list: [],
				detail: {}
			}
		},
		async onLoad(params) {
			this.dev_type = params.dev_type;
			this.select_dev.id = params.dev_id;
			this.select_dev.name = params.dev_name;
			if (params.typeid) {
				this.select_dev.typeid = params.typeid;
			}
			if (this.token) {
				this.isLogin = await this.$loginState('check');
				if (this.isLogin) {
					this.getYryList();
				} else {
					this.isLogin = await this.$loginState('reset');
				}
			}

		},
		async onShow() {

			if (this.loginStateUpdate) {
				this.token = uni.getStorageSync('token');
				this.userInfo = uni.getStorageSync('userInfo');
				this.isLogin = true;
				this.dataInit();
				this.getYryList();
				this.loginStateUpdate = false;
			}

			if (!this.token && !this.isLogin) {
				this.isLogin = await this.$loginState('reset');
			}

			if (this.select_dev.update) {
				this.dataInit();
				this.getYryList();
				this.select_dev.update = false;
			}

		},
		onReachBottom() {
			if (this.loadingState.completed) {
				this.params.page = 1;
				return false
			} else {
				this.params.page++;
				this.getYryList();
			}
		},
		methods: {

			// 初始化
			dataInit: function() {
				this.params.page = 1;
				this.list = [];
				this.loadingState.default = true;
				this.loadingState.loading = false;
				this.loadingState.completed = false;
			},

			// 设备数据表
			getYryList: async function() {
				// console.log("page", {
				// 	appid: this.appid,
				// 	token: this.token,
				// 	user_id: this.userInfo.uid,
				// 	device_id: this.select_dev.id,
				// 	order: 'desc',
				// 	page: this.page,
				// 	limit: this.params.limit,
				// 	startDate: this.params.startDate,
				// 	overDate: this.params.overDate
				// })
				let res = await this.$api.tool_api.getYryList({
					appid: this.appid,
					token: this.token,
					user_id: this.userInfo.uid,
					device_id: this.select_dev.id,
					order: 'desc',
					page: this.params.page,
					limit: this.params.limit,
					startDate: this.params.startDate,
					overDate: this.params.overDate
				})
				console.log("表格数据", res.data.data)

				if (res.data.ret == 1000 && res.data.data) {
					this.loadingState.default = false;
					this.list = this.list.concat(res.data.data);
					if (res.data.data.length < this.params.limit) {
						this.loadingState.loading = false;
						this.loadingState.completed = true;
					} else {
						this.loadingState.loading = true;
						this.loadingState.completed = false;
					}
				} else {
					this.loadingState.loading = false;
					this.loadingState.default = false;
				}
			},


			// 打开时刻清虫详情弹窗
			showDetail: function(detail) {
				this.detailLoading.loading = true;
				this.detail = {};
				this.showPopup('show', 'isShowDetail');
				this.detail = {
					...detail
				};
				this.detailLoading.loading = false;
			},

			// 打开选择查询日期组件
			changeDate: function(type) {
				//type ==1 开始日期 2 终止日期
				this.params.date_type = type;
				this.showPopup('show', 'isSeleceDate');
			},

			// 弹窗
			showPopup: function(type, name) {
				if (type == 'show') {
					this.flag.isFullPage = true;
					this.flag[name] = true;
				} else if (type == 'hide') {
					for (let i in this.flag) {
						this.flag[i] = false;
					}
				}
			},

			// 选择日期
			selectDate: function(data) {
				this.flag.isFullPage = false;
				this.flag.isSeleceDate = false;
				if (data.type == 1) {
					this.params.startDate = data.date;
				} else {
					this.params.overDate = data.date;
				}
			},

			// 关闭日期控件
			closeDate: function() {
				this.showPopup('hide')
			},

			// 清空日期
			clearDate: function(data) {
				this.flag.isFullPage = false;
				this.flag.isSeleceDate = false;
				this.params.startDate = '';
				this.params.overDate = '';
			},

			search: function() {
				this.dataInit();
				this.getYryList();
			}
		},
		computed: {

		},
		components: {
			laydate,
			loading,
			empty
		},
	}
</script>

<style lang="less">
	.list-wrap {
		.item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx;
			margin-bottom: 20rpx;
			background: #FFFFFF;

			.btn {
				padding: 2rpx 20rpx;
				background: #ff9600;
				border-radius: 10rpx;
				color: #fff;
				font-size: 30rpx;
			}

			.info {
				.time {
					margin-bottom: 20rpx;
					font-size: 30rpx;
				}

				.pest-count {
					font-size: 28rpx;
					color: #000
				}
			}
		}
	}
</style>
